<script setup lang="ts">
import {defineProps, PropType} from 'vue';
import {Bookmark} from "@/utils/bookmarkUtils.js";

const props = defineProps({
  treeNode: {
    type: Object,
    required: true,
  },
  itemData: {
    type: Object as PropType<Bookmark>,
    required: true,
  }
});
</script>

<template>
  <i :class="props.itemData.url ? 'website-node-icon' : 'folder-node-icon'"></i>
  <div class="tree-node-limit-length">
    {{ props.itemData.title }}
  </div>
</template>

<style>
.folder-node-icon {
  width: 20px;
  height: 20px;
  background-image: url('@/assets/img/folder.png');
  background-size: contain;
  display: inline-block;
}
.website-node-icon {
  width: 20px;
  height: 20px;
  background-image: url('@/assets/img/website.png');
  background-size: contain;
}
.tree-node-limit-length {
  margin-left: 3px;
  max-width: 60%;
}
</style>